@finance-nav-avatar-wh: 64px;

.finance-layout {
  display: block;
  background: #f8f8f8;
  &__nav {
    width: @alain-ms-product-col-1-width;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid @brand-bordered-color;
    &-user {
      position: relative;
      margin-bottom: 16px;
      font-size: 12px;
      text-align: center;
      &--title {
        position: relative;
        width: 80%;
        height: 0;
        margin: 0 auto 16px;
        text-align: center;
        border-top: 20px solid @brand-color;
        border-right: 24px solid transparent;
        border-left: 24px solid transparent;
        > span {
          position: absolute;
          top: -20px;
          left: 25%;
          color: #fff;
        }
      }
      &--avatar {
        display: block;
        width: @finance-nav-avatar-wh;
        height: @finance-nav-avatar-wh;
        margin: 0 auto 16px auto;
        border-radius: 50%;
      }
    }
    &-list {
      padding-top: 16px;
      border-top: 1px solid @grey-3;
    }
    &-item {
      display: block;
      height: 40px;
      padding-left: 12px;
      color: rgb(55, 61, 65);
      line-height: 40px;
      border-left: 2px solid transparent;
      &:hover,
      &--active {
        color: @brand-color;
        background-color: rgb(251, 251, 251);
        border-left-color: @brand-color;
      }
    }
  }
}
